<template>
  <div class="audio-stream">
    <div class="stream-container">
      <audio ref="audioElement" autoplay playsinline muted></audio>
      <div class="visualizer" ref="visualizer"></div>
    </div>
    <div class="stream-status">
      <i :class="['fas', statusIcon]"></i>
      <span>{{ statusText }}</span>
    </div>
  </div>
</template>

<script>
import { ref, watch, onUnmounted } from 'vue';

export default {
  props: {
    stream: {
      type: MediaStream,
      default: null
    }
  },
  
  setup(props) {
    const audioElement = ref(null);
    const visualizer = ref(null);
    const statusIcon = ref('fa-microphone');
    const statusText = ref('未连接');
    let audioContext = null;
    let analyser = null;
    let source = null;
    let animationFrame = null;
    
    // 创建音频可视化
    const setupAudioVisualizer = () => {
      if (!props.stream || !visualizer.value) return;
      
      // 创建音频上下文
      audioContext = new (window.AudioContext || window.webkitAudioContext)();
      analyser = audioContext.createAnalyser();
      source = audioContext.createMediaStreamSource(props.stream);
      
      // 连接分析器
      source.connect(analyser);
      analyser.connect(audioContext.destination);
      
      // 设置分析器参数
      analyser.fftSize = 256;
      const bufferLength = analyser.frequencyBinCount;
      const dataArray = new Uint8Array(bufferLength);
      
      // 绘制可视化
      const draw = () => {
        if (!visualizer.value) return;
        
        analyser.getByteFrequencyData(dataArray);
        
        visualizer.value.innerHTML = '';
        const width = visualizer.value.clientWidth;
        const barWidth = (width / bufferLength) * 2.5;
        let x = 0;
        
        for (let i = 0; i < bufferLength; i++) {
          const barHeight = dataArray[i] / 2;
          
          const bar = document.createElement('div');
          bar.className = 'bar';
          bar.style.width = `${barWidth}px`;
          bar.style.height = `${barHeight}px`;
          bar.style.left = `${x}px`;
          bar.style.bottom = `${100 - barHeight}%`;
          
          visualizer.value.appendChild(bar);
          x += barWidth + 1;
        }
        
        animationFrame = requestAnimationFrame(draw);
      };
      
      draw();
    };
    
    // 监听流变化
    watch(() => props.stream, (newStream) => {
      if (newStream) {
        // 设置音频元素
        if (audioElement.value) {
          audioElement.value.srcObject = newStream;
          audioElement.value.play().catch(e => console.log('自动播放限制:', e));
        }
        
        // 更新状态
        statusIcon.value = 'fa-microphone';
        statusText.value = '语音已连接';
        
        // 设置可视化
        setupAudioVisualizer();
      } else {
        // 清理资源
        if (audioElement.value) {
          audioElement.value.pause();
          audioElement.value.srcObject = null;
        }
        
        if (animationFrame) {
          cancelAnimationFrame(animationFrame);
        }
        
        if (audioContext) {
          audioContext.close();
          audioContext = null;
        }
        
        // 更新状态
        statusIcon.value = 'fa-microphone-slash';
        statusText.value = '语音已断开';
      }
    }, { immediate: true });
    
    // 清理资源
    onUnmounted(() => {
      if (animationFrame) {
        cancelAnimationFrame(animationFrame);
      }
      
      if (audioContext) {
        audioContext.close();
      }
    });
    
    return {
      audioElement,
      visualizer,
      statusIcon,
      statusText
    };
  }
};
</script>

<style scoped>
.audio-stream {
  position: relative;
  height: 150px;
  background: #0d1117;
  border-radius: 8px;
  overflow: hidden;
}

.stream-container {
  position: relative;
  height: 100%;
}

audio {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visualizer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
}

.bar {
  position: absolute;
  background: #3498db;
  border-radius: 2px 2px 0 0;
}

.stream-status {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #a0aec0;
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .audio-stream {
    height: 120px;
  }
}
</style>